<template>
    <div class="main">
        <section>
            <el-form ref="searchForm" class="search-block" :model="listQuery" label-position="right" label-width="96px">
                <el-row  type="flex">
                    <el-col :span="6">
                        <el-form-item label="时间类型：" prop="timeType">
                            <el-select v-model="listQuery.timeType" placeholder="请选择" clearable>
                                <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item  prop="name">
                           <el-date-picker
                            v-model="rangeTime"
                            type="daterange"
                            range-separator="至"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            :default-time="['00:00:00','23:59:59']"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="提交人：" prop="nickName">
                           <el-input v-model="listQuery.nickName" placeholder="请输入用户昵称进行搜索" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="审核状态:" prop="auditStatus">
                            <el-select v-model="listQuery.auditStatus" clearable @change="search">
                                <el-option  label="未审核" :value="2"></el-option>
                                <el-option  label="审核通过" :value="4"></el-option>
                                <el-option  label="审核未通过" :value="8"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="" class="btn-item">
                    <el-button type="primary" size="mini" icon="el-icon-search" plain @click="search">搜索</el-button>
                    <span class="btn-reset" @click="resetForm('searchForm')">清空搜索条件</span>
                </el-form-item>
            </el-form>
            <div style="margin-bottom:10px;color:#e6a23c; cursor: pointer;" @click="auditNo">提示：当前有{{auditNum}}条待审核</div>
            <el-table :data="list" v-loading="listLoading" header-row-class-name="table-header" element-loading-text="给我一点时间" border highlight-current-row>
                <el-table-column align="center" type="index" label="序号" width="80"></el-table-column>
                <el-table-column align="center" label="提交用户" prop="nickName"></el-table-column>
                <el-table-column align="center" label="提交人手机" prop="mobile"></el-table-column>
                <el-table-column align="center" label="种草类型" >
                   <template slot-scope="scope">
                       <span v-if="scope.row.type==='2'">单图文</span>
                       <span v-if="scope.row.type==='4'">多图文</span>
                       <span v-if="scope.row.type==='8'">视频</span>
                    </template>
                </el-table-column>   
                <el-table-column align="center" label="审核状态" >
                   <template slot-scope="scope">
                       <span v-if="scope.row.auditStatus===2">未审核</span>
                       <span v-if="scope.row.auditStatus===4">审核通过</span>
                       <span v-if="scope.row.auditStatus===8">审核未通过</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="提交时间">
                    <template slot-scope="scope">
                        <span>{{formatDate(scope.row.submitAuditAt, 'YYYY-MM-DD HH:mm:ss')}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="审核时间">
                    <template slot-scope="scope">
                        <span>{{formatDate(scope.row.auditAt, 'YYYY-MM-DD HH:mm:ss')}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="操作" v-if="rightsButtons['view'] || rightsButtons['audit']">
                    <template slot-scope="scope">
                      <el-button v-if="scope.row.auditStatus===2 && rightsButtons['audit']" type="primary" size="mini" @click="auditLook(scope.row, 'audit')" >审核</el-button>
                      <el-button v-if="scope.row.auditStatus!==2 && rightsButtons['view']" type="primary" size="mini" @click="auditLook(scope.row, 'view')" >查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="listQuery.pageNum"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="listQuery.pageSize"
                    background
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="listTotal">
            </el-pagination>
        </section>
    </div>
</template>
<script>
    export default {
        name: 'audit',
        data(){
            return {
                listQuery: {
                    pageNum: 1,
                    pageSize: 10,
                    nickName:'',
                    auditStatus:'',
                    endTime:'',
                    startTime:'',
                    timeType:''
                },
                options:[
                    {
                        value: 0,
                        label: '提交时间'
                    },
                    {
                        value: 1,
                        label: '审核时间'
                    },
                ],
                rangeTime:[],
                listLoading: false,
                list: [],
                auditNum:0,
                listTotal: 0,
                btnLoading: false
            }
        },
        created(){
            this.getList();
        },
        methods: {
            auditNo() {
               this.listQuery.pageNum = 1
               this.listQuery.auditStatus= 2
               this.getList() 
            },
            // 搜索
            search() {
                this.listQuery.pageNum = 1
                this.getList()
            },
            getList(){
                this.listLoading = true
                if(this.rangeTime){
                    if(this.rangeTime.length>0){
                        this.listQuery.startTime = this.rangeTime[0]
                        this.listQuery.endTime = this.rangeTime[1]
                    } else {
                        this.listQuery.startTime = ''
                        this.listQuery.endTime = ''
                    }
                }else {
                   this.listQuery.startTime = ''
                   this.listQuery.endTime = '' 
                }
                this.request({
                    url: '/zhongcao-web-manage/zhong-cao-manage/audit-list',
                    method: 'post',
                    data: this.listQuery
                }).then((res) => {
                    this.list = res.data.auditArticleList
                    this.auditNum = res.data.auditNum
                    this.listTotal = res.totalCount
                    this.listLoading = false
                }).catch(err => {
                    console.log(err);
                    this.list = [];
                    this.listTotal = 0;
                    this.listLoading = false;
                });
            },
            handleSizeChange (value) {
                this.listQuery.pageSize = value
                this.getList()
            },
            handleCurrentChange(val){
                this.listQuery.pageNum = val;
                this.getList();
            },
            // 清空搜索条件
            resetForm (formName) {
                this.rangeTime = []
                this.$nextTick(() => {
                    this.$refs[formName].resetFields()
                })
            },
            auditLook(row, type){
              this.$router.push({
                path: `audit/${type}`,
                query: {
                    id: row.id
                }
              }) 
            }
        }
    }
</script>
<style lang="scss">
    @import "../../../styles/mixin";
    .banner-container{
        .avatar-uploader .el-upload{
            width: 120px;
            height: 120px;
            line-height: 118px;
        }
    }
    .activity-img{
        @include flex;
        @include center;
        min-height: 60px;
        img{
            width:100%;
            height: 100%;
            max-width: 60px;
            max-height: 60px;
        }
    }
    .el-row{
        margin-bottom: 12px;
    }
    .resourceImg{
        width: 60px;
        height: 60px;
    }
</style>
